<template>
  <div class="artist-detail-container">
    <!-- 顶部大图区域 -->
    <div class="hero-section">
      <div class="hero-background">
        <el-image 
          :src="artist?.bannerImage || artist?.avatar || '/default-banner.jpg'" 
          :alt="artist?.name"
          fit="cover"
          class="hero-image"
        />
        <div class="hero-overlay"></div>
      </div>
      
      <!-- 返回按钮 -->
      <div class="back-button" @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      
      <!-- 艺人头像和基本信息 -->
      <div class="artist-hero-info">
        <div class="artist-avatar-large">
          <el-image 
            :src="artist?.avatar || '/default-avatar.png'" 
            :alt="artist?.name"
            fit="cover"
            class="avatar-large"
          />
        </div>
        <div class="artist-hero-details">
          <h1 class="artist-name-large">{{ artist?.name || '加载中...' }}</h1>
          <div class="artist-genre-tag">
            <el-tag :type="getMusicTypeColor(artist?.genre || '')" size="large">
              {{ getMusicTypeLabel(artist?.genre || '') }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 艺人详情内容 -->
    <div v-else-if="artist" class="artist-content">
      <!-- 艺人统计信息 -->
      <div class="stats-section">
        <div class="stat-item">
          <div class="stat-number">{{ artist.votes || 0 }}</div>
          <div class="stat-label">投票</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ artist.performancesCount || 0 }}</div>
          <div class="stat-label">演出</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ artist.worksCount || 0 }}</div>
          <div class="stat-label">作品</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ artist.followers || 0 }}</div>
          <div class="stat-label">关注</div>
        </div>
      </div>

      <!-- 艺人介绍 -->
      <div class="description-section">
        <h3 class="section-title">艺人介绍</h3>
        <p class="artist-description">{{ artist.description || '暂无介绍' }}</p>
      </div>

      <!-- 投票按钮 -->
      <div class="vote-section">
        <el-button 
          type="primary" 
          size="large"
          :icon="hasVoted ? 'Check' : 'Star'"
          @click="handleVote"
          :loading="voting"
          class="vote-button"
          :class="{ 'voted': hasVoted }"
        >
          {{ hasVoted ? '已投票' : '为艺人投票' }}
        </el-button>
      </div>

      <!-- 演出列表 -->
      <div class="performances-section">
        <div class="section-header">
          <h3 class="section-title">近期演出</h3>
          <el-button text @click="viewAllPerformances">查看全部</el-button>
        </div>
        
        <div v-if="performances.length === 0" class="empty-state">
          <el-empty description="暂无演出安排" />
        </div>
        
        <div v-else class="performance-list">
          <div 
            v-for="performance in performances.slice(0, 3)" 
            :key="performance.id"
            class="performance-card"
            @click="viewPerformance(performance.id)"
          >
            <div class="performance-time">
              <div class="time-day">{{ formatPerformanceDay(performance.startTime) }}</div>
              <div class="time-hour">{{ formatPerformanceHour(performance.startTime) }}</div>
            </div>
            <div class="performance-info">
              <h4 class="performance-title">{{ performance.title }}</h4>
              <p class="performance-venue">{{ performance.venue }}</p>
              <div class="performance-status">
                <el-tag 
                  :type="getPerformanceStatusType(performance.status)" 
                  size="small"
                >
                  {{ getPerformanceStatusText(performance.status) }}
                </el-tag>
              </div>
            </div>
            <div class="performance-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 作品展示 -->
      <div class="works-section">
        <div class="section-header">
          <h3 class="section-title">代表作品</h3>
          <el-button text @click="viewAllWorks">查看全部</el-button>
        </div>
        
        <div v-if="works.length === 0" class="empty-state">
          <el-empty description="暂无作品" />
        </div>
        
        <div v-else class="works-grid">
          <div 
            v-for="work in works.slice(0, 4)" 
            :key="work.id"
            class="work-card"
            @click="viewWork(work.id)"
          >
            <div class="work-cover">
              <el-image 
                :src="work.coverUrl || '/default-work-cover.jpg'" 
                :alt="work.title"
                fit="cover"
                class="work-image"
              />
              <div class="work-overlay">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
            <div class="work-info">
              <h4 class="work-title">{{ work.title }}</h4>
              <p class="work-duration" v-if="work.duration">{{ work.duration }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <el-result
        icon="error"
        title="加载失败"
        sub-title="无法加载艺人信息，请稍后重试"
      >
        <template #extra>
          <el-button type="primary" @click="loadArtistDetail">
            重新加载
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, ArrowRight, VideoPlay } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { getArtistDetail } from '@/api/artist'
import { getArtistPerformances } from '@/api/performance'
import { voteForArtist } from '@/api/vote'
import { getArtistWorks } from '@/api/work'
import type { Artist, Performance, Work } from '@/types'

// 路由和状态
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const artist = ref<Artist | null>(null)
const performances = ref<Performance[]>([])
const works = ref<Work[]>([])
const voting = ref(false)
const hasVoted = ref(false)

// 获取艺人详情
const loadArtistDetail = async () => {
  try {
    loading.value = true
    const artistId = route.params.id as string
    const [artistData, performancesData, worksData] = await Promise.all([
      getArtistDetail(artistId),
      getArtistPerformances(artistId),
      getArtistWorks(artistId)
    ])
    
    artist.value = artistData.data
    performances.value = performancesData.data?.items || []
    works.value = worksData || []
    
    // 检查是否已投票
    checkVoteStatus()
  } catch (error) {
    console.error('加载艺人详情失败:', error)
    ElMessage.error('加载艺人详情失败')
  } finally {
    loading.value = false
  }
}

// 检查投票状态
const checkVoteStatus = () => {
  // 这里应该调用API检查用户是否已为该艺人投票
  // 暂时使用本地状态
  hasVoted.value = false
}

// 投票功能
const handleVote = async () => {
  if (!artist.value) return
  
  try {
    voting.value = true
    await voteForArtist(artist.value.id)
    hasVoted.value = true
    artist.value.votes = (artist.value.votes || 0) + 1
    ElMessage.success('投票成功！')
  } catch (error) {
    console.error('投票失败:', error)
    ElMessage.error('投票失败，请稍后重试')
  } finally {
    voting.value = false
  }
}

// 查看演出详情
const viewPerformance = (performanceId: number) => {
  router.push(`/performances/${performanceId}`)
}

// 查看所有演出
const viewAllPerformances = () => {
  // 可以跳转到演出列表页面
  ElMessage.info('查看所有演出功能开发中...')
}

// 查看作品详情
const viewWork = (workId: number) => {
  // 可以跳转到作品详情页面
  ElMessage.info('查看作品详情功能开发中...')
}

// 查看所有作品
const viewAllWorks = () => {
  // 可以跳转到作品列表页面
  ElMessage.info('查看所有作品功能开发中...')
}

// 工具函数
const formatPerformanceDay = (dateTime: string) => {
  const date = new Date(dateTime)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  if (date.toDateString() === today.toDateString()) {
    return '今日'
  } else if (date.toDateString() === tomorrow.toDateString()) {
    return '明日'
  } else {
    return `${date.getMonth() + 1}/${date.getDate()}`
  }
}

const formatPerformanceHour = (dateTime: string) => {
  const date = new Date(dateTime)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit',
    hour12: false 
  })
}

const getPerformanceStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    'SCHEDULED': 'primary',
    'ONGOING': 'success',
    'COMPLETED': 'info',
    'CANCELLED': 'danger'
  }
  return statusMap[status] || 'info'
}

const getPerformanceStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'SCHEDULED': '已安排',
    'ONGOING': '进行中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || '未知'
}

// 生命周期
onMounted(() => {
  loadArtistDetail()
})
</script>

<style lang="scss" scoped>
.artist-detail-container {
  min-height: 100vh;
  background: #f5f5f5;
}

// 顶部大图区域
.hero-section {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.hero-background {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
  }
  
  .el-icon {
    font-size: 18px;
    color: #333;
  }
}

.artist-hero-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.artist-avatar-large {
  flex-shrink: 0;
}

.avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.artist-hero-details {
  flex: 1;
  color: white;
}

.artist-name-large {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.artist-genre-tag {
  .el-tag {
    font-weight: 600;
  }
}

// 加载状态
.loading-container {
  padding: 20px;
}

// 主要内容区域
.artist-content {
  padding: 20px;
  margin-top: -20px;
  position: relative;
  z-index: 5;
}

// 统计信息
.stats-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

// 艺人介绍
.description-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.artist-description {
  margin: 0;
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

// 投票按钮
.vote-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vote-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 24px;
  
  &.voted {
    background: #67c23a;
    border-color: #67c23a;
  }
}

// 演出列表
.performances-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.performance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performance-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #e9ecef;
    transform: translateY(-2px);
  }
}

.performance-time {
  flex-shrink: 0;
  text-align: center;
  min-width: 60px;
}

.time-day {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.time-hour {
  font-size: 12px;
  color: #666;
}

.performance-info {
  flex: 1;
}

.performance-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.performance-venue {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.performance-arrow {
  flex-shrink: 0;
  color: #999;
}

// 作品展示
.works-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.work-card {
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
}

.work-cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.work-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  
  .el-icon {
    font-size: 24px;
    color: white;
  }
}

.work-card:hover .work-overlay {
  opacity: 1;
}

.work-info {
  padding: 0 4px;
}

.work-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.work-duration {
  margin: 0;
  font-size: 12px;
  color: #666;
}

// 空状态
.empty-state {
  padding: 40px 20px;
  text-align: center;
}

// 错误状态
.error-container {
  padding: 40px 20px;
}

// 移动端适配
@media (max-width: 768px) {
  .hero-section {
    height: 350px;
  }
  
  .artist-hero-info {
    padding: 16px;
  }
  
  .avatar-large {
    width: 70px;
    height: 70px;
  }
  
  .artist-name-large {
    font-size: 20px;
  }
  
  .artist-content {
    padding: 16px;
  }
  
  .stats-section {
    padding: 16px;
  }
  
  .stat-number {
    font-size: 18px;
  }
  
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .work-image {
    height: 100px;
  }
}
</style> 